﻿
@{
    ViewBag.Title = "Main";
    Layout = null;
}

<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script src="layer/extend/layer.ext.js"></script>
<script src="~/layer/layer.js"></script>

@*  layui 官网地址：不要熬夜，小心猝死！！下雨啦  https://www.ilayuis.com/index.htm  *@
@*  layer弹窗网址： https://www.ilayuis.com/layer/index.htm  *@
<style>
    body .layerdemo {
        border-radius: 8px;
    }

        body .layerdemo .layui-layer-title {
            border-radius: 8px 8px 0 0;
        }
</style>
<div class="layer_notice" style="width:300px;height:200px;display:none;">
    hello,i'm layer!
    <span>你在弹窗中看到我了吗？</span>

    <span>var index = parent.layer.getFrameIndex(window.name);</span>
    <span>parent.layer.close(index);</span>

</div>

<button id="func1" onclick="func1();">初体验1</button>
<button id="func2" onclick="func2();">皮肤2</button>
<button id="func3" onclick="func3();">询问框3</button>
<button id="func4" onclick="func4();">提示层4</button>
<button id="func5" onclick="func5();">蓝色风格5</button>
<button id="func6" onclick="func6();">捕捉页6</button>
<button id="func7" onclick="func7();">页面层7</button>
<button id="func8" onclick="func8();">自定义8</button>
<button id="func9" onclick="func9();">tips层9</button>
<button id="func10" onclick="func10();">iframe层10</button>
<button id="func11" onclick="func11();">iframe窗11</button>
<button id="func12" onclick="func12();">加载层12</button>
<button id="func13" onclick="func13();">loading层13</button>
<button id="func14" onclick="func14();">小tips14</button>
<button id="func15" onclick="func15();">prompt层15</button>
<button id="func16" onclick="func16();">tab层</button>
<button id="openpage" onclick="openpage();">openpage</button>
<button id="tips">tips</button>
<button id="tips2">tips2</button>


<script>
    function func1() {
        layer.alert('内容');
    }

    function func2() {
        layer.alert('内容', {
            icon: 1,
            skin: 'layer-ext-moon' //该皮肤由layer.seaning.com友情扩展。关于皮肤的扩展规则，去这里查阅
        });
    }

    function func3() {
        //询问框
        //layer.msg('你瞌睡了吗？', {
        //    time: 2000, //2s后自动关闭
        //    btn: ['不瞌睡', '还是站起来吧']
        //});

        layer.confirm('您是如何看待前端开发？', {
            btn: ['站着看', '躺着看'] //按钮
        }, function () {
            layer.msg('站着看：重要', { icon: 1 });
        }, function () {
            layer.msg('躺着看：没有吃饭重要！', {
                time: 2000, //2s后自动关闭
                btn: ['明白了', '知道了']
            });
        });
    }

    function func4() {
        //提示层
        layer.msg('玩命提示中');
    }

    function func5() {

        layer.alert('偶吧深蓝style', {
            skin: 'layui-layer-lan'
            , closeBtn: 0
            , shift: 4 //动画类型
        });


        ////墨绿深蓝风
        //layer.alert('墨绿风格，点击确认看深蓝', {
        //    skin: 'layui-layer-molv' //样式类名
        //    , closeBtn: 0
        //}, function () {
        //    layer.alert('偶吧深蓝style', {
        //        skin: 'layui-layer-lan'
        //        , closeBtn: 0
        //        , shift: 4 //动画类型
        //    });
        //});
    }

    //将指定的元素作为弹窗显示出来
    function func6() {
        //捕获页

        //type 含义
        //0	信息框 （默认值）
        //1	页面层
        //2	iframe层
        //3	加载层
        //4	tips层

        layer.open({
            type: 1,//页面层
            shade: false,
            title: false, //不显示标题
            content: $('.layer_notice'), //捕获的元素
            cancel: function (index) {
                layer.close(index);
                this.content.show();
                //layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', { time: 2000, icon: 6 });
            },
            end: function () {
                // getPeasants(1);//刷新父级页面列表方法，类似于回调函数
            }
        });
    }

    function func7() {
        //页面层
        layer.open({
            type: 1,
            skin: 'layui-layer-rim', //加上边框
            area: ['420px', '240px'], //宽高
            content: 'hello world'
        });
    }

    function func8() {
        //自定页
        layer.open({
            type: 1,
            shade: false,
            skin: 'layui-layer-demo', //样式类名
            closeBtn: 0, //不显示关闭按钮
            shift: 2,
            area: ['420px', '240px'], //宽高
            shadeClose: true, //开启遮罩关闭
            content: '内容'
        });
    }

    function func9() {
        //tips层
        layer.tips('Hi，我是tips', $("#tips"));
    }

    function func10() {
        //iframe层
        layer.open({
            type: 2,
            title: 'layer mobile页',
            shadeClose: true,
            shade: 0.8,
            area: ['380px', '50%'],
            content: 'http://m.baidu.com' //iframe的src
        });
    }

    function func11() {
        //iframe窗
        layer.open({
            type: 2,
            title: "养殖信息维护",
            closeBtn: 1, //显示关闭按钮
            shade: [0.4],//背景色透明度
            area: ['440px', '515px'],
            offset: 'auto', //右下角弹出
            /* time: 2000, //2秒后自动关闭*/
            skin: 'layerdemo',  //设置弹窗4个角为圆角
            content: ['/home/about', 'no'], //iframe的url，no代表不显示滚动条
            end: function () { //关闭弹窗的回调函数
                layer.open({
                    type: 2,
                    title: '百度一下，你就知道',
                    shadeClose: true,
                    shade: false,
                    maxmin: true, //开启最大化最小化按钮
                    area: ['1150px', '650px'],
                    content: 'http://m.baidu.com'
                });
            }
        });
    }

    function func12() {
        //加载层
        var index = layer.load(0, { shade: false }); //0代表加载的风格，支持0-2
    }

    function func13() {
        //loading层
        var index = layer.load(1, {
            shade: [0.1, '#fff'] //0.1透明度的白色背景
        });
    }

    function func14() {
        //小tips
        layer.tips('我是另外一个tips，只不过我长得跟之前那位稍有些不一样。', $('#tips2'), {
            tips: [1, '#3595CC'],
            time: 4000
        });
    }

    function func15() {

        //prompt层
        layer.prompt({
            title: '输入任何口令，并确认',
            formType: 1 //prompt风格，支持0-2
        }, function (pass) {
            layer.prompt({ title: '随便写点啥，并确认', formType: 2 }, function (text) {
                layer.msg('演示完毕！您的口令：' + pass + ' 您最后写下了：' + text);
            });
        });
    }

    function func16() {
        //tab层
        layer.tab({
            area: ['600px', '300px'],
            tab: [{
                title: 'TAB1',
                content: '内容1'
            }, {
                title: 'TAB2',
                content: '内容2'
            }, {
                title: 'TAB3',
                content: '内容3'
            }]
        });
    }


    function openpage() {
        //官网欢迎页
        layer.open({
            type: 2,
            skin: 'layui-layer-lan',
            title: 'layer弹层组件',
            fix: false,
            shadeClose: true,
            maxmin: true,
            area: ['1000px', '500px'],
            content: 'http://www.baidu.com'
        });
    }
</script>

